<div
	class="px-4 py-16 mx-auto sm:max-w-xl md:max-w-full lg:max-w-screen-xl md:px-24 lg:px-8 lg:py-20"
	[ngClass]="['bg' + default, 'text' + defaultInv]"
>
	<h2 class="mb-8 text-4xl font-bold leading-none text-center">What do we have to offer?</h2>
	<ul class="grid gap-3 md:grid-cols-2 lg:grid-cols-3">
		<li *ngFor="let offer of offerings" class="flex items-center space-x-2">
			<svg
				xmlns="http://www.w3.org/2000/svg"
				viewBox="0 0 512 512"
				[ngClass]="['text' + primary]"
				class="w-5 h-5 fill-current"
			>
				<path
					d="M426.072,86.928A238.75,238.75,0,0,0,88.428,424.572,238.75,238.75,0,0,0,426.072,86.928ZM257.25,462.5c-114,0-206.75-92.748-206.75-206.75S143.248,49,257.25,49,464,141.748,464,255.75,371.252,462.5,257.25,462.5Z"
				/>
				<polygon
					points="221.27 305.808 147.857 232.396 125.23 255.023 221.27 351.063 388.77 183.564 366.142 160.937 221.27 305.808"
				/>
			</svg>
			<span>{{ offer }}</span>
		</li>
	</ul>
</div>
